<template>
  <div class="box">
    <el-form ref="form" label-width="100px" :model="form" :rules="rulesForm">
      <el-row>
        <el-col :md="8" :xl="6">
          <el-form-item label="员工姓名：" prop="name">
            <el-input v-model="form.name" placeholder="员工姓名" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xl="6">
          <el-form-item label="联系方式：" prop="iPhone">
            <el-input v-model="form.iPhone" placeholder="联系方式" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xl="6">
          <el-form-item label="员工职位：" prop="position">
            <el-select v-model="form.position" placeholder="员工职位" class="full-width">
              <el-option
                v-for="item in positionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="8" :xl="6">
          <el-form-item label="选择日期：" prop="startDate">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              class="full-width-important"
              value-format="yyyy-mm-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-center">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableAdd',
  data() {
    return {
      form: {},
      // 编辑或者新建的必填规则
      rulesForm: {
        name: [{ required: true, trigger: 'blur', message: '请填写员工姓名' }],
        iPhone: [
          { required: true, trigger: 'blur', message: '请填写手机号' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        position: [{ required: true, trigger: 'change', message: '请选择职位名称' }]
      },
      positionList: [
        { id: '1', name: '前端开发' },
        { id: '2', name: '后端开发' },
        { id: '3', name: '测试' },
        { id: '4', name: '运维' }
      ]
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.back()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('submit!')
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
